<template>
  <div>
    <Nuxt />
    <div class="backtop" v-if="visible" @click="backToTop">
      <img src="@/static/pageUp.webp" class="img" alt="backtop" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      visible: false,
    };
  },
  methods: {
    backToTop() {
      let currentPos = window.pageYOffset;
      let interval = setInterval(function () {
        if (currentPos > 0) {
          currentPos -= Math.max(1, Math.floor(currentPos / 10));
          window.scrollTo(0, currentPos);
        } else {
          clearInterval(interval);
        }
      }, 10);
    },
    checkPosition() {
      this.visible = window.scrollY > 800;
    },
  },
  mounted() {
    window.addEventListener("scroll", this.checkPosition);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.checkPosition);
  },
};
</script>
<style>
.backtop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 42px;
  height: 42px;
  cursor: pointer;
}
@media (max-width: 768px) {
  .backtop {
    width: 36px !important;
    height: 36px !important;
  }
}
</style>